<template>
	<div style="position: relative;">
		<div class="shangping_k">	
			<swiper :aspect-ratio="1000/1000" style="width: 100%;"  dots-position="center" loop auto :list="demo06_list" :index="demo06_index"></swiper>
		</div>
		<!-- <div style="padding: 10px 0;background-color: #ffffff;"> -->
			<!-- <div class="jifenshang——kuang">
				<div class="jifenshang_wen">{{list.name}}</div>
			</div> -->
			<div class="jf_dingshi1" style="position: relative;">
				<p style="font-size:20px;line-height: 40px;float: left;color: #ffffff;">¥ {{list.price}}</p>
				<!-- <div style="float: left;height: 14px;width: 9px;margin-top: 13px;display: block;">
					<div style="color: #FFFFFF;line-height:36px;font-size: 28px;">¥</div>
				</div>
				<div style="float: left;height: 36px;margin-top:4px;display: block;">
					<div style="display: block;color: #FFFFFF;line-height: 36px;font-size:28px;">{{list.price}}</div>
				</div> -->
				<div style="width: 80px;height: 40px;float: left;margin-left: 10px;">
				
					<div style="color: #FFFFFF;height:40px;font-size: 13px;"><p style="text-decoration:line-through;line-height: 40px;">¥{{list.order_price}}</p></div>
				</div>
				<div class="shijian11112" style="position:absolute;top:10px;right: 5px;">
				  	<p>距结束：<span>{{day}}</span> 天 <span>{{hours}}</span>：<span>{{minutes}}</span>：<span>{{miao}}</span></p>
			  	</div>
			  		
				<div class="clearfix"></div>
			</div>

			<div class="jifenshang——kuang11">
				<div class="jifenshang_wen1">{{content}}</div>
			</div>

			<div class="jifenshang_wen1">
				<div class="jf_duan1" style="display: table;">活动规则：{{rule}}</div>
			</div>
			
		<div style="width: 100%;height: 8px;background: #F5F5F5;"></div>
		<div @click="xuanzejishen" class="choose_jixing">
			<div class="choose_jixing_text">
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;选择商品属性
			</div>
		</div> 
		<div class="spfl_line"></div>
		<div class="spxq_biaoti">商品详情</div>
		<div style="background: #EEEEEE;width: 100%;height: 1px;"></div>
		<div class="spxq_img_first">
			<p style="font-size: 14px;width: 100%;" v-html="tianjia"></p>
			<img :src="url + image" style="margin-top: 5px;width: 100%;"/>
		</div>
		<div class="kongbai_box"></div>

		<div class="footer" @click="canyu" style="z-index:0;">
		  	立即参与
	    </div>

	    <div v-transfer-dom >
	      	<popup v-model="show5" style="background: rgba(0,0,0,0);">
	      		<div class="xuanze_jixing_color">
			   		<img :src="url + image" class="shouji_slt"/>
			   		<div class="xzk_you_text">
			   			<div class="jiage_qujian">￥ {{price}}</div>
			   			<div class="kucun_xinghao"><span> {{morenshuxing}}</span></div>
			   		</div>
			   		<div class="goumaishuliang" style="height: 136px;">
					   	<span class="jia_jian_icon">
					   	 	<div style="background: white;width: 100%;height: 40px;"></div>
					   	</span>
					   	<div class="clearfix"></div>
				   </div>
				   <div class="jishenyanse">
				   		<div class="jishen_color">
				   			<p v-for="(value,key) in shuxing" :class="value.clname" @click="zunze(key,value.name)">{{value.name}}</p>
				   		</div>
				   </div>
				   <div class="jishenyanse">
						<div>
					   		<checker v-model="shuid" radio-required default-item-class="xuanze_yanse_sx" selected-item-class="xuanze_yanse_sx_select">
							    <checker-item v-for="value in xiaosx" :value="value.goods_attr_id" style="padding:2px 10px;margin-left: 10px;" @on-item-click="onItemClick(value.jifen,value.attr_val)">{{value.attr_val}}</checker-item>
						    </checker>
				   		</div> 
				   </div>
				</div>
				<div style="width: 100%;height: 50px;"></div>
				<!-- <div class="footer" @click="jiache" v-show="show3">确定</div> -->
				<div class="footer" @click="queding(list.goas.goods_id)" v-show="!show3">确定</div>
	      	</popup>
		</div>
		<toast v-model="show" type="text" :time="1500" :position="position">{{tishi}}</toast>
		<loading :show="show1" :text="text1"></loading>
	</div>
</template>

<script>
	import { Swiper, Checker, Popup, TransferDom, Toast, CheckerItem, Loading } from 'vux'
	import axios from 'axios'
	import { mapState, mapActions } from 'vuex'
export default {
	directives: {
	    TransferDom
	},
	components:{
	    Swiper, 
	    Checker, 
	    Popup,
	    Toast,
	    CheckerItem,
	    mapState, 
	    mapActions,
	    Loading
	},
	data () {
		return {
			show5: false,
			demo06_list: [],      	
			demo06_index: 0,
			xzjx:false,
			list:'',
			jifen:'',
			shuone:'',
			id:'',
			xiaoliang:'',
			shuxing:'',
			shuzu:[],
			price:'',
			morenshuxing:'',
			xiaosx:'',
			shuid:'',
			largeshu:'',
			show3:false,
			show:false,
			tishi:'',
			position:'bottom',
			show1:false,
			text1:'Loading...',
			day:'',
	      	hours:'',
	      	minutes:'',
	      	miao:'',
	      	content:'',
	      	rule:'',
	      	content_all:'',
	      	image:'',
	      	tianjia:'',
		}
	},
	created(){
		this.show1 = true;
		this.id = this.$route.query.goods_id;
		var that = this;
		axios.post(that.url+"/home/goods/getgoodsDetails",{goods_id:that.id})
        .then(function(res){
        	var sifu = res.data.goas.content_all;
        	// var reg = /(<\s*img[^>]*)alt[=\s\"\']+[^\"\']*[\"\']?([^>]*>)/gi;
			that.tianjia ='<div class="xianzhi">' + sifu + '</div><style>.xianzhi {width: 100%;}.xianzhi img{width: 100%!important;}</style>';
			console.log(that.tianjia);

        	document.title = res.data.goas.name;
        	that.show1 = false;
            that.demo06_list = res.data.pic.map((item, index) => ({
				url: '',
				img:that.url + item.pic,
			}))
			for(var i=0;i<res.data.attr.length;i++){
				if(res.data.attr[i].is_price_main == '1'){
					that.price = res.data.attr[i].price;
					that.morenshuxing = res.data.attr[i].attr_val;
					that.xiaosx = res.data.attr[i].attr;
				}
				if(res.data.attr[i].is_price_main == '1'){
					res.data.attr[i].clname = 'moren2';
				}else{
					res.data.attr[i].clname = 'moren'
				}
				
			}
			that.shuxing = res.data.attr;
			that.list = res.data;
			that.content = res.data.goas.content;
			that.rule = res.data.goas.rule;
			that.content_all = res.data.goas.content_all;
			that.image = res.data.goas.image;
			that.dateDif(res.data.goas.start_time*1000,res.data.goas.end_time*1000);
   //          that.jifen = res.data.shuxing[0].jifen;
   //          that.xiaoliang = res.data.info[0].is_sale;
        })
        .catch(function(err){
            console.log(err);
        })  

	},
	methods: {
		xuanzejishen(){
			this.show5 = true;
		},
		xuanzejishenguan(){
			this.show5 = false;
		},
		xianshi(){
			this.show5 = true;
		},
		onItemClick(jifen,shuxing){
			this.price = jifen;
			this.morenshuxing = shuxing;
		},
		queding(goods_id){
			if(this.morenshuxing == '' || this.shuid == ''){
				// this.show5 = false;
				this.show = true;
				this.tishi = '请选择属性';
				this.position = 'bottom';
			}else{
				var that = this;
				axios.post(that.url+"/home/RobOrder/buyNow",{goods_id:that.id,openid:this.token,price_attr_id:this.shuid,other_attr:this.morenshuxing})
		        .then(function(res){
		        	console.log(res)
		        	if(res.data.status == 1){
		        		that.show5 = false;
		        		that.show = true;
						that.position = 'middle';
						that.$router.push({path:'/lijifaqi',query:{goods_id:goods_id}});
		        	}else{
		        		that.show5 = false;
		        		that.position = 'middle';
		        		that.show = true;
		        		that.tishi = res.data.msg;
		        		setTimeout(()=>{
		        			that.$router.push({path:'/'});
		        		},2000)
		        	}
		        })
		        .catch(function(err){
		            console.log(err);
		        })
			}
		},
		jiache(){
			if(this.morenshuxing == '' || this.shuid == ''){
				// this.show5 = false;
				this.show = true;
				this.tishi = '请选择属性';
				this.position = 'bottom';
			}else{
				var that = this;
				axios.post(that.url+"/home/Gwc/addCart",{goods_id:that.id,openid:this.token,goods_attr_id:this.shuid,name:this.morenshuxing})
		        .then(function(res){
		        	console.log(res)
		        	if(res.data.status == 1){
		        		that.show5 = false;
		        		that.show = true;
						that.tishi = '加入购物车成功';
						that.position = 'middle';
		        	}
		        })
		        .catch(function(err){
		            console.log(err);
		        }) 
			}
		},
		zunze(key,name){
			for(var i=0;i<this.shuxing.length;i++){
				this.shuxing[i].clname = 'moren';
			}
			this.shuxing[key].clname = 'moren2';
			this.xiaosx = this.shuxing[key].attr;
			this.largeshu = name;
		},
		jiru(){
			if(this.morenshuxing == '' || this.shuid == ''){
				this.show5 = true;
				this.show3 = true;
			}else{
				var that = this;
				axios.post(that.url+"/home/Gwc/addCart",{goods_id:that.id,openid:this.token,goods_attr_id:this.shuid,name:this.morenshuxing})
		        .then(function(res){
		        	console.log(res)
		        	if(res.data.status == 1){
		        		that.show5 = false;
		        		that.show = true;
						that.tishi = '加入购物车成功';
						that.position = 'middle';
		        	}
		        })
			}
		},
		rightnoe(){
			if(this.morenshuxing == '' || this.shuid == ''){
				this.show5 = true;
				this.show3 = false;
			}else{
				var that = this;
				axios.post(that.url+"/home/Gwc/addCart",{goods_id:that.id,openid:this.token,goods_attr_id:this.shuid,name:this.morenshuxing})
		        .then(function(res){
		        	console.log(res)
		        	if(res.data.status == 1){
		        		that.show5 = false;
		        		that.show = true;
						that.position = 'middle';
						that.$router.push('/querendingdan');
		        	}
		        })
		        .catch(function(err){
		            console.log(err);
		        })
			}	
		},
		dateDif(begin,end){
		    var date = begin - end; 
		    var days    = date / 1000 / 60 / 60 / 24;
		    var daysRound   = Math.floor(days);
		    var hours    = date/ 1000 / 60 / 60 - (24 * daysRound);
		    var hoursRound   = Math.floor(hours);
		    var minutes   = date / 1000 /60 - (24 * 60 * daysRound) - (60 * hoursRound);
		    var minutesRound  = Math.floor(minutes);
		    var seconds   = date/ 1000 - (24 * 60 * 60 * daysRound) - (60 * 60 * hoursRound) - (60 * minutesRound);
		    var secondsRound  = Math.floor(seconds);
		    var time = "倒计时"+(daysRound+"天"+hoursRound +"时"+minutesRound+"分"+secondsRound+"秒");
		    this.day = daysRound;
		    this.hours = hoursRound;
		    this.minutes = minutesRound;
		    this.miao = secondsRound;
		    setInterval(()=>{this.dajishi()},1000)
	    },
	    dajishi(){
	    	if(this.day == 0 && this.hours == 0 && this.minutes == 0 && this.miao == 0){
	    		this.day = 0;
	    		this.hours = 0;
	    		this.minutes = 0;
	    		this.miao = 0;
	    	}else{
		    	if(this.miao > 0){
		    		this.miao--;
		    	}else{
		    		this.miao = 59;
		    		if(this.minutes > 0){
		    			this.minutes--;
		    		}else{
		    			this.minutes = 59;
		    			if(this.hours > 0){
		    				this.hours--;
		    			}else{
		    				this.hours = 23;
		    				if(this.day >0){
		    					this.day--;
		    				}
		    			}
		    		}
		    		
		    	}
		    }
    	},
    	canyu(){
    		this.show5 = true;
    	}
	},
	computed:{
        ...mapState({
            token: state => state.Token.userToken()//获取用户Token
        }),
    }
}
</script>

<style scoped>
	.xianzhi {width: 100%;}
	.xianzhi img{width: 100%;}
	.vux-popup-dialog {overflow: inherit ! important;}
	*{
		/*box-sizing: border-box;*/
	}
	body{
		position: relative;
	}
	.shijian11112{
		display: inline-block;
	}
	.shijian11112 p{
		color:#fff;
		font-size: 12px;
	}
	.shijian11112 p span{
		background:#fff;
		color:#000;
		padding: 2px 5px;
		border-radius: 2px;
	}
	.copyright {
  font-size: 12px;
  color: #ccc;
  text-align: center;
}
.text-scroll {
  border: 1px solid #ddd;
  border-left: none;
  border-right: none;
}
.text-scroll p{
  font-size: 12px;
  text-align: center;
  line-height: 30px;
}
.black {
  background-color: #000;
}
.title{
  line-height: 100px;
  text-align: center;
  color: #fff;
}
.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}
.vux-indicator.custom-bottom {
  bottom: 30px;
}
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
.fadeInUp {
  animation-name: fadeInUp;
}
.swiper-demo-img img {
  width: 100%;
}*/
.shangping_k{
	width: 100%;
	height: 375px;
	border: 1px solid red;
	
}
.kuang_k img{
	width: 100%;
	height: 160px;
}
.you_wen{
	width: 100%;
	padding: 10px 10px;
	margin-top: 10px;
	
}
.you_wen1{
	line-height: 21px;
	font-size: 15px;
	color:#333333;
}
.you_pq{
	width: 100%;
	padding: 10px 10px;
}
.you_pq1{
	line-height: 12px;
	font-size: 12px;
	float: left;
	color: #FF2E22;
	margin-top: 15px;
}

.you_pq2{
	line-height: 20px;
	font-size: 20px;
	float: left;
	color: #FF2E22;
	margin-left: 6px;
	margin-top: 8px;
}
.you_pq3{
	line-height: 12px;
	font-size: 13px;
	float: left;
	color: #9B9B9B;
	margin-left: 6px;
	margin-top: 13px;
}
.you_pq4{
	float: right;
	background: #00C850;
	color: #FFFFFF;
	border-radius: 4px;
	height: 26px;
	width:70px ;
	margin-top: 5px;
	border: none;
	outline: none;
}
.clearfix{
	float: none;
	clear: both;
}
.jifenshang——kuang{
	display: table;
	padding: 0px 15px;
	background: #FFFFFF;
	
}
.jifenshang_wen{
	line-height: 20px;
	font-size: 14px;
	color: #333333;
}

.jf_tu{
	height: 24px;
	width: 24px;
	float: left;
}
.jf_wen{
	float: left;
	line-height: 20px;
	font-size: 14px;
	color: #333333;
	margin-left:10px;
}
.jf_wen1{
	float: left;
	line-height: 22px;
	font-size: 16px;
	color: #00C850;
	margin-left: 10px;
}
.jf_sp{
	width: 100%;
	height: 40px;
	padding: 10px 10px;
	border-bottom:1px solid #EEEEEE;
}
.jf_ww{
	line-height: 20px;
	font-size: 14px;
	color: #333333;
}
.jf_box{
	width: 100%;
	margin-top: 10px;
	padding: 10px 10px;
	border-bottom: 1px solid #EEEEEE;
}
.jf_tupian1{
	height: 75px;
	width: 75px;
	float: left;
}
.jf_wenzi{margin-left: 80px;
		float: right;
		box-sizing: border-box;
		border: /*solid*/ yellow 1px;
		margin-top: -75px;
		
}
.jf_cheng_1{
	float: right;
	margin-top: 8px;
	height: 10px;
	width: 10px;
	margin-right: 10px;
}	
.jifenshang_wen1{
	margin-top: 6px;
	width: 100%;
	padding: 0 15px;
	background: #FFFFFF;
}
.ji_jiu{
	float: left;
	color: #FF2E22;
	line-height: 24px;
	font-size: 24px;
}
.ji_jiu1{
	float: left;
	color: #FF2E22;
	line-height: 12px;
	font-size: 12px;
	margin-left:8px;
	margin-top: 9px;
}
.ji_you{
	float: left;
	color: #9B9B9B;
	line-height: 13px;
	font-size: 13px;
	
}
.ji_xiao{
	float: right;
	color: #9B9B9B;
	line-height: 13px;
	font-size: 13px;
	
}
.jifenshang_wen3{
	
	margin-top: 10px;
}
.jifen_kk{
	width: 100%;
	height: 40px;
	padding: 10px 10px;
	
}	
.jifen_kk1{
	width: 100%;
	height: 40px;
	padding: 10px 10px;
	border-bottom:1px solid #d8d8d8 ;
}	
.jifen_ww{
	float: left;
	line-height: 20px;
	font-size: 14px;
	color: #333333;
}	
.jifen_ww1{
	
	line-height: 20px;
	font-size: 14px;
	color: #333333;
	
}	
.jifen_www {
	width: 20px;
	height: 20px;
	float: right;
	
}
.jf_gw{
	width: 20%;
	height: 49px;
	float: left;
	background: #FFFFFF;
	padding: 0px 17px;
	
}
.jf_gw img{
	    display: block;
    height: 26px;
    width: 27px;
    margin-top: 10px;
    margin-left: 6px;
}
.jf_jiarua{
	float: left;
	width: 40%;
	height: 49px;
	background: #68DE8B ;
	color: #FFFFFF;
}
.jf_jiaru1{
	float: left;
	width: 40%;
	height: 49px;
	background: #00C850 ;
}
.jf_jia1{
	line-height: 16px;
	font-size: 16px;
	color: #FFFFFF;
	text-align: center;
	line-height:50px;
	font-size: 14px;
}
.jf_jia2{
	line-height: 50px;
	font-size: 14px;
	color: #ffffff;
	text-align: center;
}
	/**弹出框**/
	@import '~vux/src/styles/close.less';

.popup0 {
  padding-bottom:15px;
  height:200px;
}
.popup1 {
  width:100%;
  height:100%;
}
.popup2 {
  padding-bottom:15px;
  height:400px;
}
.position-vertical-demo {
  background-color: #ffe26d;
  color: #000;
  text-align: center;
  padding: 15px;
}
.position-horizontal-demo {
  position: relative;
  height: 100%;
  .vux-close {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%) scale(4);
    color: #000;
  }
}
	/**弹出框**/
	.jishenyanse{
		border-bottom: 1px solid #E5E5E5;
		padding: 15px 10px;
		
	}
	.color_btn{
		width: 100%;
		
	}
	.xuanze_yanse_sx{
		color: #333333;
		font-size: 12px;
		line-height: 22px;
		border-radius: 5px;
		text-align: center;
		background-color: #E5E5E5;
		border: none;
	}
	.xuanze_yanse_sx_select{
		background-color: #1296DB;
		color: #FFFFFF;
	}
	.jishen_color{
		font-size: 15px;
		color: #333333;
		display: table;
		/*margin: 0 15px;*/
	}
	.moren {padding:2px 10px;font-size: 14px;float: left;background-color:#E5E5E5;border-radius: 3px;margin-left: 10px;color: #333333;}
	.moren2 {padding:2px 10px;font-size: 14px;float: left;background-color:#1296DB;border-radius: 3px;margin-left: 10px;color: #fff;}
	.goumaishuliang{
		margin-top: 5px;
		border-bottom: 1px solid #E5E5E5;
	}
	.goumaishuliang_texxt{
		float: left;
		width: 30%;
		font-size: 15px;
		color: #333333;
		margin: 16px 15px;
	}
	
	.jia_jian_icon{
		/*width: 21px;
		height: 21px;*/
		float: right;
		width: 50%;
		margin: 16px 15px;
	}
	.jia_jian_icon button{
		font-size: 14px;
		text-align: center;
		color: #949494;
		font-size: 18px;
		line-height: 21px;
		float: right;
		width: 21px;
		height: 21px;
		text-align: center;
		background-color: #E5E5E5;
		border-radius: 3px;
		border: 1px solid #E5E5E5;
		outline: none;
		
	}
	.jia_jian_icon input{
		float: right;
		width: 40px;
		height: 21px;
		text-align: center;
		border: 1px solid #fafafa;
		outline: none;
		
	}
	.guangbi_tupian{
		width: 22px;
		height: 22px;
		float: right;
		margin-right:8px;
		margin-top:4px;
	}
	img{
		display: block;
		width: 100%;
	}
	.xzk_you_text{
		float: left;
		margin-left: 140px;
		/*border: 1px solid red;*/
		/*padding: 16px;*/
	}
	.jiage_qujian{
		margin-top: 16px;
		font-size: 18px;
		font-weight: 500;
		color: #DF3033;
	}
	.kucun_xinghao{
		font-size: 12px;
		color: #333;
	}
	.shouji_slt{
		width: 123px;
		height: 123px;
		border: 1px solid #AAAAAA;
		border-radius: 6px;
		position: absolute;
		top:-15px;
		background-color: #fff;
		left: 6px;
		overflow: hidden;
	}
	.shouji_slt img{
		width: 123px;
		height: 123px;
		display: block;
	}
	.xuanze_jixing_color{
		/*position: fixed;*/
		background-color: #fff;
		/*bottom: 50px;*/
		left: 0;
		z-index: 333;
		width: 100%;
		position: relative;
		/*border: 1px solid red;*/ 
	}
	.dian_op{
		height: 0;
		padding: 0;
	}
	.vux-indicator.vux-icon-dot.active {
		background-color: red !important; width: 20px !important;height: 2px !important;
	}
	.kongbai_box{
		width: 100%;
		height: 70px;
	}
	.choose_jixing_text{
		font-size: 12px;
		color: #333333;
		line-height: 38px;
		width: 50%;
		float: left;
	}
	.choose_jixing{
		width: 100%;
		height: 38px;
		background-size: 8px;
		background: #FFFFFF;
	}
	.spxq_img_first{
		width: 90%;
		margin: 0 auto;
	}
	img{
		display: block;
		width: 100%;
	}
	body{
		width: 100%;
		height: 100%;
		position: relative;
	}
	.spxq_biaoti{
		width: 90%;
		margin: 0 auto;
		padding: 10px 0;
		font-size: 12px;
		color: #333333;
		
	}
	.spxq_img_first  img {width: 100% !important;}
	.spxq_img_first  p img {width: 100% !important;}
	.footer{
		position: fixed;
		bottom: 0;
		z-index: 99999;
		width: 100%;
		height: 50px;
		text-align: center;
		font-size: 18px;
		color: #fff;
		line-height: 50px;
		background-color:#00C850;
	}
	.spfl_line{
		width: 100%;
		height: 10px;
		background-color: #E5E5E5;
	}
	.kd_by{
		width: calc(100% / 3);
		text-align: center;
		font-size: 12px;
		color: #949494;
		float: left;
	}
	.clearfix{
		clear: both;
	}
	.kd_kc_yx{
		/*border: 1px solid red;*/
		margin-top: 10px;
	}
	.spxq_red_jiage{
		color: #DF3033;
		text-align: left;
		margin: 0 16px;
		font-size: 18px;
		font-weight: bold;
	}
	.spxq_sp_message{
		text-align: left;
		margin: 0 auto;  
		font-size: 15px;
		color: #333333;
		padding: 16px;
	}
	.vux-swiper{
		height: 316px;
	}
	.copyright {
	  font-size: 12px;
	  color: #ccc;
	  text-align: center;
	}
	.text-scroll {
	  border: 1px solid #ddd;
	  border-left: none;
	  border-right: none;
	}
	.text-scroll p{
	  font-size: 12px;
	  text-align: center;
	  line-height: 30px;
	}
	.black {
	  background-color: #000;
	}
	.title{
	  line-height: 100px;
	  text-align: center;
	  color: #fff;
	}
	.animated {
	  animation-duration: 1s;
	  animation-fill-mode: both;
	}
	.vux-indicator.custom-bottom {
	  bottom: 30px;
	}
	@-webkit-keyframes fadeInUp {
	  from {
	    opacity: 0;
	    transform: translate3d(0, 100%, 0);
	  }
	  100% {
	    opacity: 1;
	    transform: none;
	  }
	}
	@keyframes fadeInUp {
	  from {
	    opacity: 0;
	    transform: translate3d(0, 100%, 0);
	  }
	  100% {
	    opacity: 1;
	    transform: none;
	  }
	}
	.fadeInUp {
	  animation-name: fadeInUp;
	}
	.swiper-demo-img img {
	  width: 100%;
	}
	/*.jf_dingshi11{
	width: 100%;
	height: 40px;
	background: red;
	padding: 0 10px;
}*/
.jifenshang——kuang1{
	width: 100%;
	height: 40px;
	padding: 0px 15px;
	background: #FFFFFF;
}
.jf_duan1{
	
	height: 40px;
	width: 100%;
	color: #9B9B9B;
	line-height: 16px;
	font-size: 11px;
}
.jifenshang_wen2{
	width: 100%;
	background: #FFFFFF;
	
}
/*.jifenshang_wen1{
	line-height: 20px;
	font-size: 16px;
	color: #333333;
	
}*/
.jf_dingshi1{
	width: 100%;
	height: 40px;
	background: red;
	padding: 0 10px;
}


.jifenshang_wen1{
	line-height: 20px;
	font-size: 16px;
	color: #333333;
	
}
</style>
